<template>
	<view class="dynamic-form">
		<!--  可配置区域 -->
		<view class="dynamic-form-data">
			<view v-for="(field, index) in feildData" :key="index" class="dynamic-form-item">
				<view  v-if="formData[field.key] !== undefined  && formData[field.key] !== null" class="dynamic-form-item__row">
					<view class="dynamic-form-item__label">
						<uni-text>{{ field.label }}</uni-text>
						<uni-text v-if="!field.readOnly && field.required" class="required">*</uni-text>
					</view>
					<view class="dynamic-form-item__desc">
						<DynamicField :fieldKey="field.key" :formData="formData" :field="field" :isEdit="isEdit"
							@update-form-data="updateFormData" />
					</view>
				</view>
				<view v-if="formData[field.key] !== undefined  && formData[field.key] !== null && errors[field.key]" class="dynamic-form-item__error">
					<text class="error">{{ errors[field.key] }}</text>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom">
			<!-- <view v-if="userInfo.roleId !='1001'  || !isEdit " class="flex diygw-col-24">
				<button style="color: #fbf7f7 !important" @click="onCancel"
					class="diygw-btn gradual-blue radius-xl flex-sub margin-xs button-button-clz">取消</button>
				<button @click="onSave"
					class="diygw-btn cyan radius-xl flex-sub margin-xs button-button-clz">保存</button>
			</view> -->
			<view  class="flex diygw-col-24">
				<button style="color: #fbf7f7 !important" @click="onCancel"
					class="diygw-btn gradual-blue radius-xl flex-sub margin-xs button-button-clz">返回</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import DynamicField from '@/components/fields/DynamicField.vue';
	import orderFeildData from '@/common/data/orders/orderFeildData.js';
	import dataDictionary from '@/common/data/dataDictionary.js';
	export default {
		data() {
			return {
				formData: {},
				updateFlag: false,
				feildData: orderFeildData,
				isEdit: true,
				goodSourceOpt:dataDictionary.orders.source,
				storeOpt:[]
			};
		},
		components: {
			DynamicField,
		},
		
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
		},
		
		onLoad(options) {
			const orderId = options.id;
			if (options?.formData) {
				console.log("========options.formData:" + options.formData)
				this.formData = JSON.parse(options.formData);
				this.updateFlag = true;
				this.searchStoreByid();
			}
			this.initFeildOpt();
		},
		
		methods: {
			
			async initFeildOpt(){
				if (this.feildData) {
					for (let i = 0; i < this.feildData.length; i++) {
						let obj = this.feildData[i];
						if (obj.key === 'source') {
							obj.options = this.goodSourceOpt;
						}else if(obj.key === 'storeId'){
							obj.options = this.storeOpt;
						}
					}
				}
			},
			
			updateFormData(key, newFormData) {
				if (this.formData[key] == newFormData[key]) {
					return;
				}
				console.log("修改前的值======" + key + ":", this.formData[key])
				this.formData = newFormData; // 更新父组件的值
				console.log("修改后的值======" + key + ":", this.formData[key])
				if (!this.feildData) {
					return;
				}
				for (let i = 0; i < this.feildData.length; i++) {
					let obj = this.feildData[i];
					if (!obj.relations || !obj.relations[key]) {
						continue;
					}
					if (!obj.relations[key].inclues(this.formData[key])) {
						obj.isShow = false;
					} else {
						obj.isShow = true;
					}
				}
			},
			
			/**
			 * 查询门店信息
			 */
			async searchStoreByid(){
				this.$api.storeGetById(this.formData.storeId).then(result => {
					if(result){
						this.storeOpt.push({
							value:result.id,
							text:result.name
						});
						this.initFeildOpt();
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				});
			},

			// 保存
			async onSave() {
				this.formData.updatedAt = new Date();
				this.$api.goodsSave(this.formData).then(result => {
					if ( result && Number.isInteger(result)) {
						this.handleSubmit()
					}else{
						uni.showToast({
							title: "保存失败!",
							duration: 3000
						});
					} 
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "保存失败!",
						duration: 3000
					});
					return;
				})
			},
			
			// 使用示例
			async  handleSubmit() {
			  await this.showToastAndThen({
				title: '保存成功',
				icon: 'success',
				duration: 3000
			  });
			  // Toast关闭后执行的逻辑
			  onCancel();
			},
			
			// 封装工具函数
			showToastAndThen(options) {
			  return new Promise((resolve) => {
				uni.showToast({
				  title: options.title,
				  icon: options.icon || 'none',
				  duration: options.duration || 1500,
				  mask: options.mask || false
				});
				
				setTimeout(() => {
				  resolve();
				}, options.duration || 1500);
			  });
			},
			

			// 取消
			onCancel() {
				uni.navigateBack();
			},

		}
	};
</script>


<style lang="less" scoped>
	@import url("@/common/css/dynamic-form.less");
</style>